<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('投资行业分布') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目类型')" prop="dealType">
        <el-select v-model="queryParams.dealType" :placeholder="$t('项目类型')" @change="changeFund()">
          <el-option :label="$t('股权投资')" value="equity" />
          <el-option :label="$t('参股基金')" value="bf" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('基金名称')">
        <fund-select v-model="queryParams.fundId" :scope="true" @change="changeFund()" />
      </el-form-item>
      <el-form-item :label="$t('部门')">
        <DeptSelect
          v-model="queryParams.deptId"
          :placeholder="$t('部门')"
          filterable
          @change="changeFund()"
        />
      </el-form-item>
      <el-form-item :label="$t('项目负责人')" prop="personCharge">
        <UserSelect v-model="queryParams.personCharge" :placeholder="$t('项目负责人')" @change="changeFund()" />
      </el-form-item>
    </el-form>

    <div v-loading="loading">
      <div class="chartDom" style="width: 100%;height: 400px;">
        <barLineChart v-if="chartData.datas.length > 0" :chart-data="chartData" height="100%" @clickHandel="clickHandel" />
        <div v-else class="noneData">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
        <el-select v-model="queryParams.type" size="mini" class="chartSelect" style="width: 100px;" @change="changeFund()">
          <el-option :label="$t('投资数量')" value="investCount" />
          <el-option :label="$t('投资成本')" value="investCost" />
          <el-option :label="$t('最新估值')" value="valuation" />
          <el-option :label="$t('回款情况')" value="collection" />
        </el-select>
      </div>
    </div>
    <div class="list-table" style="margin-top: 15px;">
      <el-table
        v-loading="dealListLoading"
        tooltip-effect="darkTable"
        :data="dealBaseList"
        :header-cell-style="{background:'#004d8c',color:'#FFFFFF'}"
        border
        stripe
        :show-summary="true"
        :summary-method="getSummaries"
        @sort-change="dataSort"
      >
        <el-table-column sortable="custom" :label="$t('项目名称')" align="center" prop="dealName" min-width="140" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <router-link
              v-if="scope.row.dealName !== '合计'"
              :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId, companyId: scope.row.companyId, dealType: queryDealBase.dealType}}"
              target="_blank"
              class="link_a"
            >
              <span>{{ scope.row.dealName }}</span>
            </router-link>
            <span v-else>{{ scope.row.dealName }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('投资时间')" align="center" prop="firstSchemeTime" min-width="110" />
        <el-table-column sortable="custom" :label="$t('行业')" align="center" prop="industry" min-width="160" show-overflow-tooltip />
        <el-table-column sortable="custom" :label="$t('阶段')" align="center" prop="stage" min-width="160" show-overflow-tooltip />
        <el-table-column sortable="custom" :label="$t('最新持股比例%')" align="center" prop="holdRate" min-width="130">
          <template slot-scope="scope">
            <span>{{ scope.row.holdRate || scope.row.holdRate === 0 ? scope.row.holdRate.toFixed(2) : scope.row.holdRate }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('投资成本') + $t('金额单位')" align="center" prop="investAmount" min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.investAmount,'w',2,true) }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('累计回款')+$t('金额单位')" align="center" prop="collectionAmount" min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.collectionAmount,'w',2,true) }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('估值')+$t('金额单位')" align="center" prop="valuationAmount" min-width="100">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.valuationAmount,'w',2,true) }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('MOIC')" align="center" class-name="text-align" prop="moic" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.moic || scope.row.moic === 0 ? scope.row.moic.toFixed(2) : scope.row.moic }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable="custom" :label="$t('IRR')" align="center" prop="irr" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.irr || scope.row.irr === 0 ? scope.row.irr.toFixed(2) : scope.row.irr }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="queryDealBase.dealType === 'equity'" sortable="custom" :label="$t('评级')" align="center" prop="grade" min-width="70">
          <template v-if="scope.row.assetRating" slot-scope="scope">
            <span :class="'grade-'+scope.row.assetRating" />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryDealBase.pageNum"
        :limit.sync="queryDealBase.pageSize"
        @pagination="getDealByInvestIndustryVo"
      />
    </div>

  </div>
</template>

<script>
import FundSelect from '@/components/Select/fundSelect'
import barLineChart from '@/views/chart/barLineChart.vue'
import {
  getDealByInvestIndustryVo,
  getDealListSum,
  getFundInvestIndustryChart
} from '@/api/fund/fundInvestIndustry/fundInvestIndustry'
import { Decimal } from 'decimal.js'
export default {
  components: {
    FundSelect,
    barLineChart
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        dealType: 'equity',
        fundId: undefined,
        deptId: undefined,
        personCharge: undefined,
        type: 'investCount'
      },
      // 行业分组
      investIndustryGroup: [],
      // 阶段
      investStageList: [],
      resultList: [],
      dealBaseList: [],
      dealBaseListSum: {},
      // 表单参数
      form: {},
      // 选择基金组件类型
      subjectType: 'fund',
      // 选择基金后带出的charts数据
      data: {},
      // antV G6 容器对象
      graph: {},
      dealListLoading: false,
      queryDealBase: {
        dealType: undefined,
        industry: undefined,
        stage: undefined,
        fundId: undefined,
        deptId: undefined,
        personCharge: undefined,
        order: undefined,
        prop: undefined,
        pageNum: 1,
        pageSize: 10
      },
      chartData: {
        datas: []
      }
    }
  },
  mounted() {
    this.changeFund()
  },
  methods: {
    download() {
      this.graph.downloadImage('投资行业分布')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = undefined
      this.resetForm('queryForm')
      this.queryHandle()
    },
    changeFund() {
      this.loading = true
      /** 获取投资行业分布图表数据 */
      getFundInvestIndustryChart(this.queryParams).then(response => {
        if (response.code === 200) {
          this.chartData.xLabel = response.data.investIndustryGroup || []
          this.chartData.legend = true
          this.chartData.legendLeft = 'center'
          this.chartData.valueFormatter = this.queryParams.type !== 'investCount'
          this.chartData.rotate = 35
          this.chartData.datas = response.data.investStageList.map((v, i) => { return { name: v, type: 'bar', stack: '1', data: response.data.resultList[i] } })
        } else {
          this.chartData.datas = []
        }
        this.loading = false
      }).then(() => {
        // 初始化项目列表
        this.queryDealBase.industry = undefined
        this.queryDealBase.stage = undefined
        this.queryDealBase.dealType = this.queryParams.dealType
        this.queryDealBase.fundId = this.queryParams.fundId
        this.queryDealBase.deptId = this.queryParams.deptId
        this.queryDealBase.personCharge = this.queryParams.personCharge
        this.queryDealBase.pageNum = 1
        this.getDealByInvestIndustryVo()
      })
    },
    clickHandel(params, event) {
      this.queryDealBase.industry = event.name
      this.queryDealBase.stage = event.seriesName
      this.queryDealBase.dealType = this.queryParams.dealType
      this.queryDealBase.fundId = this.queryParams.fundId
      this.queryDealBase.deptId = this.queryParams.deptId
      this.queryDealBase.personCharge = this.queryParams.personCharge
      this.queryDealBase.pageNum = 1
      this.getDealByInvestIndustryVo()
    },
    getDealByInvestIndustryVo() {
      this.dealListLoading = true
      getDealByInvestIndustryVo(this.queryDealBase).then(res => {
        getDealListSum(this.queryDealBase).then(response => {
          this.dealBaseListSum = response.data
        })
          // res.rows.push(this.getSummaries(res.rows))
        this.dealBaseList = res.rows
        this.total = res.total
        this.dealListLoading = false
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 5) {
          sums[index] = this.moneyFormat(this.dealBaseListSum.investAmount, 'w', 2, true)
        } else if (index === 6) {
          sums[index] = this.moneyFormat(this.dealBaseListSum.collectionAmount, 'w', 2, true)
        } else if (index === 7) {
          sums[index] = this.moneyFormat(this.dealBaseListSum.valuationAmount, 'w', 2, true)
        } else if (index === 8) {
          sums[index] = this.dealBaseListSum.moic.toFixed(2)
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    calcMoic(row) {
      if ((row.investAmount || row.investAmount === 0) && (row.collectionAmount || row.collectionAmount === 0) && (row.investAmount)) {
        let valution = new Decimal(row.valuationAmount)
        valution = new Decimal(valution.add(row.collectionAmount))
        const num = valution.div(row.investAmount)
        return num.toFixed(2)
      }
      return ''
    },
    rowStyle({ row }) {
      if (row.dealName === '合计') {
        const style = {
          'font-weight': 'bolder'
        }
        return style
      } else {
        return {}
      }
    },
    // 排序
    dataSort(column) {
      this.dealListLoading = true
      if (column.order !== null && column.order !== undefined && column.order !== '') {
        this.queryDealBase.prop = column.prop
        if (column.order === 'ascending') {
          this.queryDealBase.order = 'asc'
        } else if (column.order === 'descending') {
          this.queryDealBase.order = 'desc'
        }
      } else {
        this.queryDealBase.prop = undefined
        this.queryDealBase.order = undefined
      }
      this.dealListLoading = false
      this.getDealByInvestIndustryVo()
    }
  }
}
</script>

<style lang="scss" scoped>

/deep/ .chartSelect {
  position: absolute!important;
  right: 55px;
  padding: 0;
  top: 3px;
  font-size: 13px;
  z-index: 9;
}

/deep/.list-table {
  .el-table--border{
    border: 1px solid #8377f7 !important;
  }
  .el-table{
    border-radius: 5px;
    border-color: #8377f7;
    table{
      border-radius: 5px;
      border-color: #8377f7;
    }
    thead th{
      background-color: #8377f7 !important;
      border: none !important;
      color: #fff !important;
    }
    tr,td{
      border: none !important;
    }
  }
}

/deep/.el-table .el-table__footer-wrapper .text-align .cell {
  text-align: center!important;
}

</style>
